<template>
	<div class="wraper" :class="{h:locale==='zh','theme-dark':themeIndex==1}">
		<div class="invite-new" :class="{iphoneX:isIphoneX,iphone:isIphone,android:!isIphone,noSuper:!isSuperPartner}">
			<div class="nav-bar">
				<div class="arrow" @click="goBack" :class="{opacity:!isShowNav}"></div>
			</div>
			<!-- 用户信息 -->
			<div class="user-info2 flex">
				<div class="head-img">
					<img :src="headImg" alt="">
					<h3 class="one-line">{{accountName}}</h3>
					<h4>UID <span>{{uid}}</span></h4>
				</div>
				<div class="transfer" v-if="isSuperPartner===1">
					<span @click.stop="goTransfer">{{$t('invite-key8')}}</span>
				</div>
				<div class="transfer" v-else>
					<span @click.stop="goTransfer">{{$t('apply-key47')}}</span>
				</div>
			</div>
			<!-- 返佣信息 -->
			<div class="rebate-info-title">
				<div class="ratio">
					<p><span>{{$t('invite-new43')}}</span></p>
					<p>
						<b>{{showMoneyRate}}</b>
						<a href="javascript:;" class="eye" :class="{noSee:eyeOpen}" @click="eyeOpen=!eyeOpen"></a>
					</p>
				</div>
				<div class="balance">
					<p><span>{{$t('invite-key7')}}</span></p>
					<p><b>{{shownLeftMoney}} {{currentId}}</b></p>
				</div>
			</div>
			<div class="main-fixed">
				<!-- tab头 -->
				<div class="bd" :class="{en:locale != 'zh'}" ref="bdScroll">
					<div class="bd-scroll">
						<li v-for="item in newTab" v-if="item.shown" :key="item.id" @click="activeId=item.id;" :class="{on:item.selected}">{{item.name}}</li>
					</div>
				</div>
				<!-- 返佣概览 -->
				<div class="rebate-info-body" v-show="activeId==1">
					<div class="time-btn">
						<b @click="showTime=true;">{{columns[selectColumns]}}</b>
						<i :class="{on:showTime}"></i>
					</div>
					<div class="rebate-list-info total" v-if="locale==='zh'">
						<div class="ele">
							<!-- 总返佣 -->
							<dl>
								<dt>{{$t('invite-new48')}}</dt>
								<dd>{{total.hasOwnProperty('rebate')?total.rebate:'--'}}</dd>
							</dl>
							<!-- 总手续费 -->
							<dl>
								<dt>{{$t('invite-new01')}}</dt>
								<dd>{{total.hasOwnProperty('fee')?total.fee:'--'}}</dd>
							</dl>
							<!-- 总交易量 -->
							<dl>
								<dt>{{$t('invite-new02')}}</dt>
								<dd>{{total.hasOwnProperty('trade')?total.trade:'--'}}</dd>
							</dl>
						</div>
						<div class="ele">
							<!-- 出金金额 -->
							<dl>
								<dt>{{$t('invite-new03')}}</dt>
								<dd>{{total.hasOwnProperty('amount_out')?total.amount_out:'--'}}</dd>
							</dl>
							<!-- 入金金额 -->
							<dl>
								<dt>{{$t('invite-new04')}}</dt>
								<dd>{{total.hasOwnProperty('amount_in')?total.amount_in:'--'}}</dd>
							</dl>
							<!-- 返佣人数 -->
							<dl>
								<dt>{{$t('invite-new05')}}</dt>
								<dd>{{total.hasOwnProperty('count_vertical')?total.count_vertical:'--'}}</dd>
							</dl>
						</div>
					</div>
					<div class="rebate-list-info total" v-else>
						<div class="ele">
							<!-- 总返佣 -->
							<dl>
								<dt>{{$t('invite-new48')}}</dt>
								<dd>{{total.hasOwnProperty('rebate')?total.rebate:'--'}}</dd>
							</dl>
							<!-- 总交易量 -->
							<dl>
								<dt>{{$t('invite-new02')}}</dt>
								<dd>{{total.hasOwnProperty('trade')?total.trade:'--'}}</dd>
							</dl>
							<!-- 入金金额 -->
							<dl>
								<dt>{{$t('invite-new04')}}</dt>
								<dd>{{total.hasOwnProperty('amount_in')?total.amount_in:'--'}}</dd>
							</dl>
						</div>
						<div class="ele">
							<!-- 今日注册 -->
							<dl>
								<dt>{{$t('invite-new45')}}</dt>
								<dd>{{level1RegCountToday===''?'--':level1RegCountToday}}</dd>
							</dl>
							<!-- 直接返佣人数 -->
							<dl :style="{width:locale==='ja'?'1.4rem':'2.1rem'}">
								<dt>{{$t('invite-new46')}}</dt>
								<dd>{{subFriends===''?'--':subFriends}}</dd>
							</dl>
							<!-- 间接返佣人数 -->
							<dl :style="{width:locale==='ja'?'2.8rem':'2.1rem'}">
								<dt @click="showAmountInEn">
									{{$t('invite-new47')}}
									<img v-if="locale==='en'" style="height:13px;margin-left:3px;transform:translateY(-1px);" src="../../static/images/ch6@3x.png" alt="">
								</dt>
								<dd>{{subAgent===''?'--':subAgent}}</dd>
							</dl>
						</div>
					</div>
					<div class="title-fixed">
						<span @click="showTimeDesc">{{$t('invite-key32')}}</span>
						<img @click="showTimeDesc" src="../../static/images/ch6@3x.png" alt="">
					</div>
					<div class="rebate-list-fixed">
						<div class="rebate-list-fixed-scroll" :style="{top:-distanceTop+'px'}">
							<li v-for="item in listIndex">{{item.date}}</li>
						</div>
					</div>
					<div class="title">
						<ul class="scroll-title" :style="{left:-distance+'px'}" :class="{en:locale==='en',ja:locale==='ja'}">
							<!-- 总交易量 -->
							<li class="tab8">{{$t('invite-new02')}}</li>
							<!-- 总手续费 -->
							<li class="tab9">{{$t('invite-new01')}}</li>
							<!-- 总返佣 -->
							<li class="tab10" :style="{width:locale==='ja'?'2.4rem':'1.6rem'}">{{$t('invite-new42')}}</li>
							<!-- 有效交易人数 -->
							<li class="tab3">{{$t('invite-new06')}}</li>
							<!-- 入金人数 -->
							<li class="tab4">{{$t('invite-new07')}}</li>
							<!-- 入金金额 -->
							<li class="tab5">{{$t('invite-new04')}}</li>
							<!-- 出金人数 -->
							<li class="tab6" :style="{width:locale==='en'?'2.5rem':'1rem'}">{{$t('invite-new08')}}</li>
							<!-- 出金金额 -->
							<li class="tab7">{{$t('invite-new03')}}</li>
						</ul>
					</div>
					<div class="rebate-list-info fixed" ref="scroll">
						<div class="scroll-list first-tab" :class="{h:finished2,en:locale==='en',ja:locale==='ja'}">
							<van-list
								v-model="loading2"
				  				:finished="finished2"
				  				:error.sync="loadError2"
				  				:error-text="$t('reloadText')"
				  				:loading-text="$t('loading')"
				  				:finished-text="$t('finishedText')"
							>
								<ul class="item" v-for="item in listIndex" :class="{en:locale==='en'}">
									<li class="tab8">{{item.trade}}</li>
									<li class="tab9">{{item.fee}}</li>
									<li class="tab10" :style="{width:locale==='ja'?'2.4rem':'1.6rem'}">{{item.rebate}}</li>
									<!-- <li class="tab3" @click="jumpToDetail(item.num_trade,1,item.date)" :class="{on:item.num_trade>0}">{{item.num_trade}}</li> -->
									<li class="tab3">{{item.num_trade}}</li>
									<!-- <li class="tab4" @click="jumpToDetail(item.num_in,2,item.date)" :class="{on:item.num_in>0}">{{item.num_in}}</li> -->
									<li class="tab4">{{item.num_in}}</li>
									<li class="tab5">{{item.amount_in}}</li>
									<!-- <li class="tab6" @click="jumpToDetail(item.num_out,3,item.date)" :class="{on:item.num_out>0}" :style="{width:locale==='en'?'2.5rem':'1rem'}">{{item.num_out}}</li> -->
									<li class="tab6" :style="{width:locale==='en'?'2.5rem':'1rem'}">{{item.num_out}}</li>
									<li class="tab7">{{item.amount_out}}</li>
								</ul>
							</van-list>
						</div>
					</div>
				</div>
				<!-- 返佣明细 -->
				<div class="rebate-log" v-show="activeId==2">
					<div class="rebate-log-title">
						<span :class="{on:item.selected}" v-for="item in rebateMenus" :key="item.id" @click="rebateNavId=item.id;" v-if="item.shown">{{item.name}}<i v-if="item.num && item.id===2"></i></span>
					</div>
					<div class="items-content" :class="{h:finished2}">
						<van-list
							v-model="loading2"
			  				:finished="finished2"
			  				:error.sync="loadError2"
			  				:error-text="$t('reloadText')"
			  				:loading-text="$t('loading')"
			  				:finished-text="$t('finishedText')"
						>
							<div class="items" v-if="rebateList.length" v-for="item in rebateList">
								<div class="items-title">UID:{{item.order_uid}}</div>
								<div class="items-main">
									<!-- 合约价值 -->
									<li>
										<p>{{$t('invite-key27')}}</p>
										<h2>{{item.contract_amount}}</h2>
									</li>
									<!-- 手续费 -->
									<li :class="{ja:locale==='ja' || locale==='en'}">
										<p>{{$t('invite-key65')}}</p>
										<h2>{{item.fee}}</h2>
									</li>
									<!-- 返佣 -->
									<li :class="{ja:locale==='ja' || locale==='en'}">
										<p>{{$t('backList-key3')}}({{item.currency}})</p>
										<h2>{{item.rebate}}</h2>
									</li>
									<!-- 交易类型 -->
									<li>
										<p>{{$t('invite-key30')}}</p>
										<h2><span>{{item.productName}}</span></h2>
									</li>
									<!-- 时间 -->
									<li>
										<p>{{$t('invite-key32')}}</p>
										<h2>{{item.day2}}</h2>
									</li>
								</div>
							</div>
							<div class="empty2" v-if="rebateList.length===0 && !loading2">
								<p>
									<img v-if="themeIndex==1" src="../../static/images/empty2-dark.svg" alt="">
									<img v-else src="../../static/images/empty2.svg" alt="">
								</p>
								<p>{{$t('noData')}}</p>
							</div>
						</van-list>
					</div>
				</div>
				<!-- 用户管理 -->
				<div class="user-manage" v-show="activeId==3">
					<div class="search-box">
						<div class="left">
							<img src="../../static/images/search2.png" alt="">
							<input type="tel" @blur="inputBlur" v-model="searchUID" :placeholder="$t('invite-new09')">
						</div>
						<div class="right">
							<span class="close" @click="searchUID='';goSearch();" v-if="searchUID"></span>
							<b :style="{width:locale==='en'?'60px':'50px'}" @click="goBtnSearch">{{$t('inviteList-key11')}}</b>
						</div>
					</div>
					<div class="title" :class="{zh:locale==='zh'}">
						<!-- 账户/级别/UID -->
						<li class="all">{{isSuperPartner==1?$t('invite-new10'):$t('invite-new49')}}</li>
						<!-- 返佣比例 -->
						<li class="rebate" v-if="isSuperPartner==1" :style="{width:locale==='en'?'2rem':'1.2rem'}">{{locale!='zh'?$t('inviteList-key10'):$t('invite-new43')}}</li>
						<!-- 备注 -->
						<li class="remarks" v-if="isSuperPartner==1">{{$t('invite-new11')}}</li>
						<!-- 账户权益 -->
						<li class="money" v-if="isSuperPartner==1 && locale==='zh'">账户权益</li>
						<!-- 注册时间 -->
						<li class="time" style="float:right;" v-if="isSuperPartner==0">{{$t('inviteList-key10')}}</li>
					</div>
					<div class="rebate-list-info fixed" style="top:3.05rem;left:0;padding-right:0;transform:translateX(0);">
						<div class="item3" :style="{'paddingLeft':0.35+(0.15*item.level)+'rem'}" :class="{dark:item.level>0}" v-if="item.shown && isSuperPartner==1" v-for="item in searchList" @click="goFold(item.parentUid,item.uid,item.shown,item.has_down,item.level,item.hasSubs)">
							<div class="item3-uid" :style="{'width':3.3-(0.15*item.level)-(locale==='zh'?0.8:0)+'rem'}" :class="{on:item.hold,hasDown:item.has_down==1}">
								<h4 class="one-line">{{item.nickname}}</h4>
								<p class="small10">
									<i class="level" v-if="locale==='zh'">{{item.shwnLevel}}{{$t('invite-new12')}}</i>
									<i class="level" v-else>{{$t('invite-new12')}}{{item.shwnLevel}}</i>
									 / {{item.uid}}
								</p>
							</div>
							<div class="item3-rebate" :style="{width:locale==='en'?'2rem':locale==='ja'?'1.6rem':'1.2rem'}">
								<span>{{locale!='zh'?item.showTime:item.rate}}</span>
								<b class="edit" v-if="item.set_rate && item.uid!=uid && locale==='zh'" @click.stop="goManage(item,1)">
									<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
									    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									        <g transform="translate(-382.000000, -423.000000)">
									            <g transform="translate(0.000000, 248.000000)">
									                <g transform="translate(0.000000, 164.000000)">
									                    <g transform="translate(382.000000, 11.000000)">
									                        <rect x="0" y="0" width="16" height="16"></rect>
									                        <path d="M14,8 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 L8,2" :stroke="themeIndexColor" stroke-linecap="round"></path>
									                        <path d="M8.81527708,0.353993916 L11.0152771,0.353993916 C11.236191,0.353993916 11.4152771,0.533080016 11.4152771,0.753993916 L11.4152771,10.5078401 L11.4152771,10.5078401 L9.91527708,12.0078401 L8.41527708,10.5078401 L8.41527708,0.753993916 C8.41527708,0.533080016 8.59436318,0.353993916 8.81527708,0.353993916 Z" :stroke="themeIndexColor" transform="translate(9.915277, 6.180917) rotate(45.000000) translate(-9.915277, -6.180917) "></path>
									                    </g>
									                </g>
									            </g>
									        </g>
									    </g>
									</svg>
								</b>
							</div>
							<div class="item3-money" v-if="isSuperPartner==1 && locale==='zh'">{{item.balance}}</div>
							<div class="item3-remarks">
								<span class="one-line" :style="{maxWidth:locale==='zh'?'1rem':'0.75rem'}">{{item.remark?item.remark:'--'}}</span>
								<b class="edit" v-if="item.uid!=uid" @click.stop="goManage(item,2)">
									<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
									    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
									        <g transform="translate(-382.000000, -423.000000)">
									            <g transform="translate(0.000000, 248.000000)">
									                <g transform="translate(0.000000, 164.000000)">
									                    <g transform="translate(382.000000, 11.000000)">
									                        <rect x="0" y="0" width="16" height="16"></rect>
									                        <path d="M14,8 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 L8,2" :stroke="themeIndexColor" stroke-linecap="round"></path>
									                        <path d="M8.81527708,0.353993916 L11.0152771,0.353993916 C11.236191,0.353993916 11.4152771,0.533080016 11.4152771,0.753993916 L11.4152771,10.5078401 L11.4152771,10.5078401 L9.91527708,12.0078401 L8.41527708,10.5078401 L8.41527708,0.753993916 C8.41527708,0.533080016 8.59436318,0.353993916 8.81527708,0.353993916 Z" :stroke="themeIndexColor" transform="translate(9.915277, 6.180917) rotate(45.000000) translate(-9.915277, -6.180917) "></path>
									                    </g>
									                </g>
									            </g>
									        </g>
									    </g>
									</svg>
								</b>
							</div>
						</div>
						<div class="item3" style="padding:0.22rem 0 0.22rem 0.35rem;" v-if="isSuperPartner==0" v-for="item in searchList">
							<li style="float:left;">{{item.nickname}}<span> / {{item.uid}}</span></li>
							<li style="float:right;">{{item.showTime}}</li>
						</div>
						<div class="empty2" v-if="searchList.length===0 && !loading && !loadError">
							<p>
								<img v-if="themeIndex==1" src="../../static/images/empty2-dark.svg" alt="">
								<img v-else src="../../static/images/empty2.svg" alt="">
							</p>
							<p>{{$t('invite-new13')}}</p>
						</div>
						<div class="loading" v-if="loading">
							<i class="icon"><img src="../../static/images/loading.gif" alt=""></i>
							<span>{{$t('loading')}}</span>
						</div>
						<div class="loading" v-if="loadError" @click="goBtnSearch">
							{{$t('loadErr')}}
						</div>
					</div>
				</div>
				<!-- 推广链接 -->
				<div class="extend" v-show="activeId==4">
					<!-- 我的邀请码 -->
					<div class="my-invite-code tab3">
						<div class="back-choice">
							<!-- 推广链接 -->
							<h1></h1>
							<span :class="{up:langDialog,down:!langDialog}" @click="langDialog = !langDialog">{{countrys.find(item => item.code === inviteLocale)?countrys.find(item => item.code === inviteLocale).name:''}}</span>
						</div>
						<!-- 我的邀请连接 -->
						<div class="top" style="margin-top:-0.62rem;">
							<div class="left">{{$t('invite-key16')}}</div>
							<div class="right">
								<span class="one-line">{{getInviteUrl2}}</span>
								<b @click.stop="copyText(getInviteUrl2)">{{$t('copy')}}</b>
							</div>
						</div>
						<!-- 我的邀请码 -->
						<div class="top" style="margin-top:0.25rem;">
							<div class="left">{{$t('invite-key36')}}</div>
							<div class="right">
								<span class="one-line">{{inviteCode}}</span>
								<b @click.stop="copyText(inviteCode)">{{$t('copy')}}</b>
							</div>
						</div>
						<div class="bottom" :style="{'backgroundImage':'url('+ sharImg +')'}" style="margin-top:0.8rem;">
							<div @click="share('partnerImage')">{{$t('invite-key78')}}</div>
							<div v-if="isNi" @click="share('nigeriaWhatsapp')" class="ni">
								<img src="../../static/images/redpacket/whatsapp.png" alt="">
								{{$t('invite-key79')}}
							</div>
							<div v-else @click="share('partner')">{{$t('invite-key79')}}</div>
							<div class="ni-tips" v-if="isNi && niShowTips">Share whatsapp to get 0.1USDT</div>
						</div>
					</div>
					<div class="edit-left-slide" v-if="activeId==4" @click="clickLeft"></div>
					<div class="edit-right-slide" v-if="activeId==4" @click="clicRight"></div>
				</div>
				<!-- 出入金管理 -->
				<div class="in-out" v-if="activeId==5">
					<div class="search-box">
						<div class="left">
							<img src="../../static/images/search2.png" alt="">
							<input type="tel" @blur="inputBlur" v-model="searchUID2" :placeholder="$t('invite-new09')">
						</div>
						<div class="right">
							<span class="close" @click="searchUID2='';searchFromBtn();" v-if="searchUID2"></span>
							<b :style="{width:locale==='en'?'60px':'50px'}" @click="searchFromBtn">{{$t('inviteList-key11')}}</b>
						</div>
					</div>
					<div class="in-out-title">
						<span :class="{on:item.selected}" v-for="item in inOutMenus" :key="item.id" @click="inOutId=item.id;" v-if="item.shown">{{item.name}}</span>
					</div>
					<div class="content">
						<div class="content-left">
							<div class="title">UID</div>
							<div class="box">
								<ul :style="{transform:'translateY(-'+ distanceTop2 +'px)'}">
									<li v-for="item in listInOut">{{item.uid}}</li>
								</ul>
							</div>
						</div>
						<div class="content-right">
							<div class="title">
								<div class="scroll big-width" :style="{left:-distance2+'px'}">
									<li class="tab1">账号</li>
									<li class="tab2">时间</li>
									<li class="tab3">币种</li>
									<li class="tab4">金额</li>
									<li class="tab5">{{inOutId==1?'入金方式':'出金方式'}}</li>
									<li class="tab6">{{inOutId==1?'入金状态':'出金状态'}}</li>
									<li class="tab7">历史累积入金</li>
									<li class="tab8">历史累积出金</li>
								</div>
							</div>
							<div class="box"  ref="scrollInOut">
								<div class="scroll-box-in-out big-width">
									<ul v-for="item in listInOut">
										<li class="tab1 one-line">{{item.nickname}}</li>
										<li class="tab2">{{item.time}}</li>
										<li class="tab3">{{item.currency}}</li>
										<li class="tab4">{{item.money}}</li>
										<li class="tab5">{{item.typeShown}}</li>
										<li class="tab6">{{item.stateShown}}</li>
										<li class="tab7">{{item.history_in}}</li>
										<li class="tab8">{{item.history_out}}</li>
									</ul>
								</div>
							</div>
							<div class="loading" v-if="inOutLoading && listInOut.length===0">
								<i class="icon"><img src="../../static/images/loading.gif" alt=""></i>
								<span>{{$t('loading')}}</span>
							</div>
							<div class="empty2" v-if="!inOutLoading && listInOut.length===0">
								<p>
									<img v-if="themeIndex==1" src="../../static/images/empty2-dark.svg" alt="">
									<img v-else src="../../static/images/empty2.svg" alt="">
								</p>
								<p>{{$t('noData')}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="desc2" v-show="activeId==1 || activeId==5" @click="copyText(webUrl)">{{$t('invite-new14',{url:webUrl})}}</div>
			<div class="desc2" v-show="activeId==2">{{$t('invite-new15')}}</div>
			<!-- <div class="desc2" v-show="activeId==2">{{$t('invite-new15_2')}}</div> -->
			<div class="desc2" v-show="activeId==3 && isSuperPartner != 0">{{$t('invite-new16')}}</div>
			<div class="desc2" v-show="activeId==3 && isSuperPartner == 0">{{$t('invite-new16_2')}}</div>
		</div>
		<!-- 语言选择 -->
		<van-action-sheet 
			class="iconBox" 
			:class="{isIphoneX:isIphoneX}"
			v-model="langDialog" 
			:actions="countrys" 
			:cancel-text="$t('cancel')" 
			@select="selectCountry" />
		<!-- 管理设置 -->
		<van-popup
			style="background:none;"
			v-model="manageDialog"
		  	position="bottom">
		  	<div class="manage-box">
		  		<h1>
		  			<!-- 用户管理/用户备注 -->
		  			<strong>{{manageDialogType===1?$t('invite-new17'):$t('invite-new18')}} UID {{manageUid}}</strong>
		  			<b @click="manageDialog=false;">{{$t('cancel')}}</b>
		  		</h1>
		  		<h2 v-if="manageDialogType===1" class="title">{{$t('invite-new19')}}</h2>
		  		<ul v-if="manageDialogType===1" class="level-choice">
		  			<li :class="{on:item.selected}" v-if="item.shown" v-for="item in manageLevel" @click="selectlevel(item)">{{item.level}}</li>
		  		</ul>
		  		<h2 v-if="manageDialogType===1" class="title">{{$t('invite-new43')}}</h2>
		  		<p v-if="manageDialogType===1"><input @blur="inputBlur" type="tel" v-model="manageRateE2" :placeholder="$t('invite-new20')">%</p>
		  		<p v-if="manageDialogType===2" style="margin-top:0.5rem;">
		  			<input @blur="inputBlur" type="text" v-model="manageRemark" :placeholder="$t('invite-new21')">
		  		</p>
		  		<van-button 
					@click="submitManage" 
					:loading-text="$t('loading')" 
					:loading="btnLoading"
					class="btn"
					color='#171A1F'
					type="primary">{{$t('invite-key72')}}
				</van-button>
		  	</div>
		</van-popup>
		<!-- 时间筛选 -->
		<van-popup
  			v-model="showTime"
  			position="bottom"
  			class="back-list-dialog"
  			:class="{'theme-dark-dialog':themeIndex==1}"
		>
  			<van-picker 
  				show-toolbar
  				:title="$t('choiceTime')"
  				:cancel-button-text="$t('cancel')"
  				:confirm-button-text="$t('confirm')"
  				:columns="columns" 
  				@change="onChange" 
  				:default-index="selectColumns"
  				@cancel="ctrlShown"
  				@confirm="onConfirm"
  			 />
		</van-popup>
	</div>
</template>
<script src="./invite.js"></script>
<style scoped lang="scss">
	@import './invite.scss';
</style>
<style>
	.van-dialog.fullDialog-toast{
		padding: 0 0.2rem;
		width: 4.6rem;
		border-radius: 0.16rem;
	}
	.van-dialog.fullDialog-toast .van-dialog__content--isolated{
		min-height: 1.8rem;
	}
	.van-dialog.fullDialog-toast .van-dialog__message{
		font-weight: 400;
		color: #444;
		line-height: 1.8;
		font-size: 0.26rem;
		padding: 0.16rem 0 0 0;
	}
	.van-dialog.fullDialog-toast .van-button--large{
		height: 0.8rem;
		line-height: 0.8rem;
	}
	.van-dialog.fullDialog-toast .van-button--large .van-button{
		font-size: 0.26rem;
	}
	.van-dialog.fullDialog-toast.dialog-dark{
		background: #202226;
	}
	.van-dialog.fullDialog-toast.dialog-dark .van-button--large{
		background: none;
	}
	.van-dialog.fullDialog-toast.dialog-dark .van-dialog__message{
		color: #E4EBF7;
	}
	.van-dialog.fullDialog-toast.dialog-dark [class*=van-hairline]::after{
		border-top: 1px solid #5B5F66;
	}
	.first-tab .van-list__loading{
		text-align: left;
		padding-left: 1rem;
	}
	.first-tab .van-list__finished-text{
		display: none;
	}
	.items-content.h .van-list__finished-text{
		display: none;
	}
	.back-list-dialog{
		border-radius: 0.18rem 0.18rem 0 0;
	}
	.back-list-dialog .van-picker__toolbar{
		height: 0.9rem;
		line-height: 0.9rem;
		background-color: #F2F4F7;
	}
	.back-list-dialog .van-picker__toolbar .van-picker__cancel{
		color: #171A1F;
		font-weight: 400;
		font-size: 0.29rem;
	}
	.back-list-dialog .van-picker__toolbar .van-picker__title{
		color: #2E3E4D;
		font-weight: 400;
		font-size: 0.29rem;
	}
	.back-list-dialog .van-picker__toolbar .van-picker__confirm{
		color: #171A1F;
		font-weight: 550;
		font-size: 0.29rem;
	}
	.back-list-dialog.theme-dark-dialog .van-picker{
		background: #242424;
	}
	.back-list-dialog.theme-dark-dialog .van-picker__mask{
		background-image: none;
	}
	.back-list-dialog.theme-dark-dialog .van-picker-column__item{
		color: #5C5D5E;
	}
	.back-list-dialog.theme-dark-dialog .van-hairline--top-bottom::after, .back-list-dialog.theme-dark-dialog .van-hairline-unset--top-bottom::after{
		border-top: 1px solid rgba(255, 255, 255, .08);
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
	.back-list-dialog.theme-dark-dialog .van-picker-column__item.van-picker-column__item--selected{
		color: #c1c1c1;
	}
	.back-list-dialog.theme-dark-dialog .van-picker__cancel{
		color: #3572DB;
	}
	.back-list-dialog.theme-dark-dialog .van-ellipsis.van-picker__title{
		color: #c1c1c1;
	}
	.back-list-dialog.theme-dark-dialog .van-picker__confirm{
		color: #3572DB;
	}
	.back-list-dialog.theme-dark-dialog .van-picker__toolbar{
		background: rgba(0, 0, 0, 0.1);
	}
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>
<style>
	.van-action-sheet.isIphoneX{
		padding-bottom: 25px;
	}
	.content.noList .van-list__finished-text{
		display: none;
	}
</style>